{extend name="property/public/insidePageBase" /}
{block name="title"}录入租赁{/block}
{block name="css"}
{__block__}
<style>
    body{ margin:0; }
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
    body .layui-iconpicker .layui-iconpicker-icon-item{ width: 20.1%; }
    body{  background-color: #ffffff; }
    .layui-upload-img-box { float:left;  margin-bottom: 2px;margin-right: 2px; background: #e0e0e0;  padding: 1px; }
    .layui-upload-img {width: 82px; height: 82px; margin-bottom: 1px;}
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <div class="layui-form-item">
                            <label class="layui-form-label">房间筛选</label>
                            <div class="layui-input-block" id="room_id_show">
                                <input type="text" name="room_id" placeholder="请选择房间" disabled  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label indispensable">租赁编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="number" disabled id="contract-number" placeholder="租赁编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <div class="layui-input-group laydate-type-start-end">
                            <div class="layui-input-split layui-input-prefix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;合同时间由&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <input type="text" name="start_date" id="startDate" placeholder="起租日期" class="layui-input" autocomplete="off">
                            <div class="layui-input-split layui-input-suffix">起</div>
                            <input type="text" name="end_date"  id="endDate" class="layui-input" placeholder="结束日期" autocomplete="off">
                            <div class="layui-input-split layui-input-suffix">结束</div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;计租生效日&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <input type="text" name="rent_date"  placeholder="计租生效日" autocomplete="off"  class="layui-input rent-time">
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label indispensable">承租人姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="lessee_info[username]" autocomplete="off" placeholder="请输入乙方姓名" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label indispensable">承租人电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="lessee_info[mobile]" autocomplete="off" placeholder="请输入乙方电话" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label indispensable">证件号码</label>
                            <div class="layui-input-block">
                                <input type="text" name="lessee_info[number]" autocomplete="off" placeholder="请输入乙方身份证号" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">证件类型</label>
                            <div class="layui-input-block">
                                <select name="lessee_info[is_type]"  lay-search>
                                    <option value="">--请选择--</option>
                                    <option value="1">身份证</option>
                                    <option value="2">护照</option>
                                    <option value="3">港澳通行证</option>
                                    <option value="4">回乡证</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">证件正面照</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="text" name="lessee_info[front_file]" placeholder="请上传证件正面照" id="front_file" class="layui-input">
                            </div>
                            <img class="checkPictureByImg front_file" style="width: 40px;height: 40px;">
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn layui-btn-primary uploadImg" lay-data="{field: 'front_file',data:{dir:'contract/lessee', field:'front_file'}}">
                                    <i class="layui-icon">&#xe67c;</i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">证件反面照</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="text" name="lessee_info[back_file]" placeholder="请上传证件反面照" id="back_file" class="layui-input">
                            </div>
                            <img class="checkPictureByImg back_file" style="width: 40px;height: 40px;">
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn layui-btn-primary uploadImg" lay-data="{field: 'back_file',data:{dir:'contract/lessee', field:'back_file'}}">
                                    <i class="layui-icon">&#xe67c;</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-suffix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;房间租金每</div>
                            <select name="pay_type" style="width: 8px;">
                                <option value="1"  style="width: 8px;">月</option>
<!--                                <option value="2"  style="width: 8px;">季度</option>-->
<!--                                <option value="3"  style="width: 8px;">年</option>-->
                            </select>
                            <input type="text" name="room_rent" style="width: 100px;" autocomplete="off" class="layui-input" placeholder="输入租金" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">¥ 每月</div>
                            <input type="text" name="bill_add_day" value="1" autocomplete="off" class="layui-input" placeholder="生成时间" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">号创建 </div>
                            <select name="bill_month">
                                <option value="3" >上月</option>
                                <option value="1" >本月</option>
                                <option value="2" >次月</option>
                            </select>
                            <div class="layui-input-split layui-input-suffix">账单</div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-suffix indispensable"> &nbsp;&nbsp;租凭押金&nbsp;&nbsp;</div>
                            <input type="text" name="room_deposit" id="room_deposit" autocomplete="off"  class="layui-input" placeholder="输入押金" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">¥&nbsp;&nbsp;</div>
                        </div>
                    </div>
                    <div class="layui-col-xs2">
                        <button type="button" class="layui-btn layui-btn-fluid" id="addOtherFee">添加其它费用</button>
                    </div>
                </div>
                <div class="layui-form-item"><div id="otherFeeBox"></div></div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">涨租模式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="is_rose" lay-filter="is-rose" autocomplete="off" value="2" title="手动" checked>
                                <input type="radio" name="is_rose" lay-filter="is-rose" autocomplete="off" value="1" title="自动" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <div class="layui-form-item">
                            <div class="layui-inline is-rose" style="display: none">
                                <div class="layui-input-group">
                                    <div class="layui-input-split layui-input-prefix">每间隔</div>
                                    <input type="text" maxlength="1" name="next_years"  placeholder="间隔年限" autocomplete="off"  class="layui-input" oninput="value=value.replace(/[^\d]/g,'');lessNum(this)">
                                    <div class="layui-input-split layui-input-suffix">年租金上涨</div>
                                    <input type="text" maxlength="5" name="next_rose_rate"  placeholder="上涨比例" autocomplete="off"  class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                    <div class="layui-input-split layui-input-suffix"> % </div>
                                </div>
                            </div>

                            <div class="layui-inline rend-is-rose">
                                <div class="layui-input-group">
                                    <input type="text" name="next_rose_date" placeholder="请输入计租时间" autocomplete="off"  class="layui-input rent-time" oninput="value=value.replace(/[^\d]/g,'');lessNum(this)">
                                    <div class="layui-input-split layui-input-suffix">起租金递增至</div>
                                    <input type="text" name="next_rose_rent" placeholder="请输入租金金额" autocomplete="off"  class="layui-input " oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                    <div class="layui-input-split layui-input-suffix"> ¥</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">


                    </div>
                </div>


                <div class="layui-form">
                    <div class="layui-col-xs9">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-suffix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;账单创建后</div>
                            <select name="bill_pay_day" style="width:10px;">
                                {for name='i' start='1' end='32' step='1'}
                                <option value="{$i}">{$i}</option>
                                {/for}
                            </select>
                            <div class="layui-input-split layui-input-suffix indispensable">日内支付，超时每日收取账单总金额</div>
                            <input type="text" maxlength="5" name="overdue_fine"  value="0"  autocomplete="off"  class="layui-input" placeholder="滞纳金比例" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">&nbsp;&nbsp;%的滞纳金，最高不超过账单总额</div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">银行手续费</label>
                            <div class="layui-input-block">
                                <select name="out_fee_flag"  lay-search>
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="1" selected>甲方承担</option>
                                    <option value="2">乙方承担</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">合同类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sign_type" lay-filter="sign_type" value="2" title="纸质" checked>
                                <input type="radio" name="sign_type" lay-filter="sign_type" value="1" title="电子" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">审核方式
                                <i class="layui-icon layui-icon-question hoverTips"  lay-text="
                                    <p>自动审核：提交合同资料自动审核</p>
                                    <p>人工确认：提交合同资料后，由其它部分或上一级行政人员核对资料后审核</p>">
                                </i>
                            </label>
                            <div class="layui-input-block">
                                <input type="radio" name="sign_audit" value="1" title="自动" checked>
                                <input type="radio" name="sign_audit" value="2" title="人工">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">退租方式
                                <i class="layui-icon layui-icon-question hoverTips"  lay-text="
                                    <p>自动：合同达到截止日期时自动结束合同</p>
                                    <p>手动：合同达到截止日期时不会结束，需要手动结束合同</p>">
                                </i>
                            </label>
                            <div class="layui-input-block">
                                <input type="radio" name="end_method" autocomplete="off" value="1" title="自动" checked >
                                <input type="radio" name="end_method" autocomplete="off" value="2" title="手动" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" >
                    <div class="layui-row">
                        <div class="layui-col-xs4" id="sign_type_esign" style="display: none;">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">合同模版</label>
                                <div class="layui-input-block">
                                    <select name="contract_template_id" id="">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" id="sign_type_image">
                    <div class="layui-form-item">
                        <label class="layui-form-label">租赁图片</label>
                        <div class="layui-input-block" id="image_info">
                            <button type="button" class="layui-btn" id="upload_imgs" lay-data="{field: 'picture',data:{dir:'contract/basic', field:'picture'}}">上传图片</button>
                            <div class="layui-upload-list" id="img_show"></div>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">租赁备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                    <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="otherFeeTpl" type="text/html">
    {{# layui.each(d, function(index,item) { }}
    <div class="layui-row">
        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;费 用 类 别&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <select name="other_fee[{{index}}][cate_id]" data-index="{{index}}" lay-filter="other_fee_cate">
                    <option value="">请选择</option>
                    {foreach $cateNameData as $k=>$v}
                    {if isset($v['children']) && $v['children']}
                    <optgroup label="{$v['label']}">
                        {foreach $v['children'] as $k2=>$v2}
                        <option value="{$v2['value']}" {{# if(item.cate_id == {$v2['value']}) { }} selected {{# } }}>{$v2['label']}</option>
                        {/foreach}
                    </optgroup>
                    {else/}
                    <option value="{$v['value']}" {{# if(item.cate_id == {$v['value']}) { }} selected {{# } }}>{$v['label']}</option>
                    {/if}
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
            <div class="layui-input-group">
                <input type="text" maxlength="8" name="other_fee[{{index}}][amount]" value="{{ item.amount }}"  data-index="{{index}}"  autocomplete="off" class="layui-input other_amount" placeholder="请输入费用" />
                <div class="layui-input-split layui-input-suffix">¥</div>
                <select name="other_fee[{{index}}][pay_type]" data-index="{{index}}" lay-filter="other_pay_type">
                    <option value="5">随租金支付</option>
                    <option value="4">一次性支付</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <label class="layui-form-label">备注说明</label>
            <div class="layui-input-block">
                <input type="text" maxlength="5" name="other_fee[{{index}}][fee_remark]" value="{{ item.fee_remark }}"  data-index="{{index}}"  autocomplete="off" class="layui-input other_remark" placeholder="请输入备注说明" />
            </div>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
            <button type="button" class="layui-btn layui-btn-danger delOtherFee" data-index="{{index}}">删除</button>
        </div>
    </div>
    {{# }); }}
</script>
<script id="room_id_tpl" type="text/html">
    <select name="room_id" lay-filter="room_id" id="room_id">
        <option value="">--请选择房间--</option>
        {{# layui.each(d.roomList, function(index, elem) { }}
        <option value="{{elem.id}}">{{elem.full_room_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer', 'laydate', 'laytpl'], function () {
        var form = layui.form,layer = layui.layer,  laytpl = layui.laytpl,laydate = layui.laydate;
        $('.uploadImg').selectImages({
            confirm:function(res,elem,data) {
                $('#' + data.field).val(res[0].src);
                $('.' + data.field).attr('src',res[0].src)
            }
        });
        laydate.render({
            elem: '.laydate-type-start-end'
            ,range: ['#startDate', '#endDate']
        });
        laydate.render({
            elem: '.rent-time'
        });
        var otherData = []
        $('#addOtherFee').on('click', function() {
            otherData.push({
                pay_type:0,
                cate_id:0,
                amount:0,
                remark:''
            })
            loadOtherFeeTpl();
        });
        $(document).on('click', '.delOtherFee', function() {
            otherData.splice($(this).data('index'), 1);
            loadOtherFeeTpl();
        });
        form.on('select(other_fee_cate)', function(elem) {
            otherData[$(elem.elem).data('index')].cate_id = elem.value;
            loadOtherFeeTpl();
        })
        $(document).on('change', '.other_amount', function() {
            otherData[$(this).data('index')].amount = $(this).val();
            loadOtherFeeTpl();
        });
        form.on('select(other_pay_type)', function(elem) {
            otherData[$(elem.elem).data('index')].pay_type = elem.value;
            loadOtherFeeTpl();
        })
        $(document).on('change', '.other_remark', function() {
            otherData[$(this).data('index')].remark = $(this).val();
            loadOtherFeeTpl();
        });

        function loadOtherFeeTpl() {
            var getTpl = otherFeeTpl.innerHTML
                ,view = document.getElementById('otherFeeBox');
            laytpl(getTpl).render(otherData, function(html){
                view.innerHTML = html;
                form.render()
            });
        }
        $('#upload_imgs').selectImages({
            confirm:function(res,elem) {
                for(var i in res) {
                    index = (new Date()).getTime()+''+i;
                    $('#img_show').append('<div class="layui-upload-img-box" id="'+index+'">' +
                        '<img src="' + res[i].src + '" class="layui-upload-img checkPictureByImg">' +
                        '<input type="hidden" name="picture[]" value="' + res[i].src + '">' +
                        '<p>' +
                        '<a class="layui-btn layui-btn-xs cftoggleUpload" style="float: left" lay-data="{field: \'picture\',data:{dir:\'contract/basic\', field:\'picture\', replace_upload_index: \''+index+'\'}}">修改</a>' +
                        '<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="float: right">删除</a>' +
                        '</p>' +
                        '</div>'
                    );
                }
            }
        });
        $(document).on('click', '.cftoggleUpload', function () {
            $('.toggleUpload').attr('lay-data', $(this).attr('lay-data'));
            $('.toggleUpload').trigger('click');
        });
        $('.replaceUploadImg').selectImages({
            confirm:function(res,elem,data) {
                let replaceUploadObj = $('#'+data.data.replace_upload_index);
                replaceUploadObj.find('img').attr('src', res[0].src);
                replaceUploadObj.find('img').attr('alt', res[0].src);
                replaceUploadObj.find('input').val(res[0].src);
            }
        });
        //合同类型
        form.on('radio(sign_type)', function(elem) {
            if(elem.value == 2) {
                $('#sign_type_image').show()
                $('#sign_type_esign').hide()
            } else {
                $('#sign_type_image').hide()
                $('#sign_type_esign').show()
            }
        })
        // 涨租模式
        form.on('radio(is-rose)', function(data) {
            if(data.value == 1) {
                $('.is-rose').show();
                $('.rend-is-rose').hide();
            } else {
                $('.is-rose').hide();
                $('.rend-is-rose').show();
            }
        });

        function loadPropertyUnitList() {
            $.get('{:request()->url()}', {get_type:'roomData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('room_id_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('room_id_show'); // 视图对象
                    $('#contract-number').val(res.data.number)
                    laytpl(getTpl).render({roomList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }
            })
        }

        loadPropertyUnitList()
    });
</script>
{/block}